<template>
  <div class="dashboard-container">
    <div class="dashboard-text"></div>
    <el-button type="primary" @click="dialogHttp = true">添加</el-button>
    <el-row v-if="httpdata">
      <el-col>
        <el-table :data="httpdata" border style="width: 100%">
          <el-table-column
            prop="id"
            label="id"
            :key="id"
            width="180"
            align="center"
          />
          <el-table-column
            prop="url"
            label="url"
            :key="id"
            width="180"
            align="center"
          />
          <el-table-column label="seo信息" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click="getinfo(scope.$index)"
                >查看</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="底部信息" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click="getfoot(scope.$index)"
                >查看</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="广告" align="center"
            >
             <template slot-scope="scope">
               <el-button type="primary" @click="insurance(scope.$index)"
              >查看</el-button
            >
            </template>
            </el-table-column
          >
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click="pHttp(scope.$index)"
                >更改</el-button
              >
              <el-button type="danger" @click="deleteHttp(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog title="添加http" :visible.sync="dialogHttp">
      <el-form :model="form">
        <el-form-item label="域名">
          <el-input v-model="ahttp.url" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogHttp = false">取 消</el-button>
        <el-button type="primary" @click="addHttp()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改http" :visible.sync="dialogPutHttp">
      <el-form :model="form">
        <el-form-item label="域名">
          <el-input v-model="phttp.url" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPutHttp = false">取 消</el-button>
        <el-button type="primary" @click="putHttp()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看seo信息" :visible.sync="dialoginfo">
      <el-form :model="form">
        <el-form-item label="网站seo标题">
          <el-input v-model="info.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="H标题">
          <el-input v-model="info.htitle" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialoginfo = false">取 消</el-button>
        <el-button type="primary" @click="putinfo()">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看底部信息" :visible.sync="dialogfoot">
      <el-form :model="form">
        <el-form-item label="p标签文字">
          <el-input v-model="info.p" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="icp备案信息">
          <el-input v-model="info.icp" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="统计代码">
          <el-input
            type="textarea"
            v-model="info.uv"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogfoot = false">取 消</el-button>
        <el-button type="primary" @click="putfoot()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getHttp,
  putHttp,
  addHttp,
  deleteHttp,
  putFoot,
  getFoot,
  putInfo,
  getInfo,
} from "@/api/table";
export default {
  name: "Dashboard",
  data() {
    return {
      httpdata: [], // http list
      ahttp: {
        url: "",
      },
      phttp: {}, //修改http的暂留信息
      Gg: [], // 广告 list
      foot: {}, // 底部信息
      info: {}, // seo信息
      upimg: "", // 图片上传后的信息
      dialogHttp: false, // 添加http的dialog
      dialogPutHttp: false, // 更改http的dialog
      dialoginfo: false, // info的dialog
      dialogfoot: false, // foot的dialog
      info: {}, // info的暂留信息
      foot: {}, // foot的暂留信息
    };
  },
  created: function () {
    this.getHttp();
  },
  methods: {
    getHttp() {
      getHttp()
        .then((res) => {
          this.httpdata = res.data_list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addHttp() {
      addHttp(this.ahttp)
        .then(() => {
          this.getHttp();
          this.dialogHttp = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    putHttp() {
      putHttp(this.phttp)
        .then(() => {
          this.getHttp();
          this.dialogPutHttp = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deleteHttp(i) {
      deleteHttp(this.httpdata[i])
        .then((res) => {
          this.getHttp();
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    pHttp(i) {
      this.phttp = this.httpdata[i];
      this.dialogPutHttp = true;
    },
    getinfo(i) {
      getInfo(this.httpdata[i].id)
        .then((res) => {
          this.info = res.data_list;
          this.dialoginfo = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    putinfo() {
      putInfo(this.info)
        .then((res) => {
          this.dialoginfo = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getfoot(i) {
      getFoot(this.httpdata[i].id)
        .then((res) => {
          this.info = res.data_list;
          this.dialogfoot = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    putfoot() {
      putFoot(this.info)
        .then(() => {
          this.dialogfoot = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    insurance(i){
      let that = this
      this.$router.push({
        path:'/table/table',
        query:{
          id:that.httpdata[i].id
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
